<template>
	<div class="productionDeliverysale1">
		<top></top>
		<div class="center">
			<left></left>
			<div class="right productionDelivery">
				<div class="where">当前位置：分销后台><router-link to="/productionDelivery">商品销售中心</router-link>
				</div>
				<div style="height: 16px; width: 100%; background: #EFEFEF;"></div>

				<div class="o_ul">
					<router-link class="o_li" to="/productionDelivery2/douyin">抖音推广商品</router-link>
          <router-link class="o_li" to="/productionDelivery2/douyin2">抖音推广商品2</router-link>
          <router-link class="o_li " to="/productionDelivery2/douyin3">抖音推广商品3</router-link>
          <router-link class="o_li" to="/productionDelivery2/douyin4">抖音推广商品4</router-link>
          <router-link class="o_li act" to="/productionDelivery2/douyin5">快手</router-link>
				</div>
				<div style="padding: 20px; display: flex;">
					<el-button type="danger" @click="goid('/productionDelivery2/douyinaddlist?dizhi='+$route.path)" style="margin-right: 20px;">添加商品</el-button>
				  <tongbu></tongbu>
				</div>
				<div class="row">
					<el-form ref="form" @submit.native.prevent :model="form" label-width="80px">
						<el-form-item label="商品名称">
							<el-input v-model="form.sale_name"></el-input>
						</el-form-item>
						<el-form-item label="商家编码">
							<el-input v-model="form.fetch_code"></el-input>
						</el-form-item>

						<el-button type="danger" size="mini" @click="search">搜索</el-button>
					</el-form>
				</div>
				<div class="con" v-loading="loading"
					style="margin:0 20px; border-left:1px #eaeaea solid; border-right:1px #eaeaea solid;">
					<el-table :data="list" style="text-align: center;" align="center" border :loading="loading">
						<el-table-column label="商品标题">
							<template slot-scope="scope">
								<span>{{ scope.row.sale_name }}</span>
							</template>
						</el-table-column>
						<el-table-column label="商品编码">
							<template slot-scope="scope">
								<span>{{ scope.row.fetch_code }}</span>
							</template>
						</el-table-column>
						<el-table-column label="排序">
							<template slot-scope="scope">
								<span>{{ scope.row.order }}</span>
							</template>
						</el-table-column>

						<el-table-column label="时间">
							<template slot-scope="scope">
								<span>{{ scope.row.created_at }}</span>
							</template>
						</el-table-column>
						<el-table-column label="上下架">
							<template slot-scope="scope">
								<el-switch  v-model="scope.row.shangjia" @change="changes(scope.row)" active-color="#13ce66"  inactive-color="#eaeaea"></el-switch>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<div style="display: flex;">
								  <el-button type="text" @click="go(scope.row.id)">编辑</el-button>
								  <el-button type="text" @click="deletes(scope.row.id)">删除</el-button>
								  <tongbu2 :id="scope.row.id" style="margin-left: 10px;"></tongbu2>
								</div>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination background layout="total,prev, pager, next" :current-page="form.page"
						@current-change="fanye" :page-size="form.pagesize" :total="total"></el-pagination>
				</div>
			</div>
		</div>

		<foot></foot>
	</div>
</template>

<script>
  import tongbu from './douyinqiehuan.vue'
  import tongbu2 from './douyinqiehuan2.vue'
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	export default {
		components: {
			"left": left,
			"top": top,
			"foot": foot,
      tongbu,
      tongbu2
		},
		name: 'productionDeliverysale1',
		data() {
			return {
				form: {
					page: 1,
					pagesize: 20,
					sale_name:"",
					fetch_code:"",
          tab:5
				},
				loading: true,
				list: "",
				total: 0,
				list2:"",
			}
		},
		created() {

			this.getpro();


		},
		methods: {
			go:function(id){
				this.$router.push({
					path:'/productionDelivery2/douyinfabu',
					query:{
						id:id,
						bianji: true,
						dizhi:this.$route.path
					}
				})
			},
			changes:function(item){
				if(item.on_sale == 0 ){
					item.on_sale = -100
				}else{
					item.on_sale = 0
				}
				this.loading = true
				axios.post('/api/plan-market/web/page/make', item)
					.then(response => {
						if (response.data.msg.code == 0) {
							this.getpro()
						} else {
							this.$message.error(response.data.msg.info);
						}
						this.loading = false
					})
			},
			getshops: function() {
				//获取商品
				var that = this;
				axios.get('/api/gth/supplier/products?page_size=1000')
					.then(response => {
						if (response.data.msg.code == 0) {
							that.shoplists = response.data.data.data
						} else {
							if (response.data.msg.code == 50401) {
								that.$router.push({
									path: "/login"
								});
								return false
							}
							that.$message.error(response.data.msg.info);
						}
					})
			},

			deletes: function(id) {
				var that = this
				this.$confirm('此操作将永久在这个栏目下删除该商品, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.post('/api/plan-market/web/page/delete', {
							id: id
						})
						.then(response => {
							if (response.data.msg.code == 0) {
								that.$message({
									message: '删除成功！',
									type: 'success'
								});
								that.loading = true
								that.getpro()
							} else {
								if (response.data.msg.code == 50401) {
									that.$router.push({
										path: "/login"
									});
									return false
								}
								that.$message.error(response.data.msg.info);
							}
						})
				})
			},

			//翻页
			fanye: function(page) {
				this.loading = true
				this.form.page = page
				this.getpro()
			},

			//获取商品
			getpro: function() {
				var that = this;
				axios.get('/api/plan-market/web/page/shoplist', {
						params: this.form
					})
					.then(response => {
						if (response.data.msg.code == 0) {
							that.total = response.data.data.total
							that.list = response.data.data.data
							this.list.forEach(item=>{
								if(item.on_sale == 0){
									this.$set(item,'shangjia',true)
								}else{
									this.$set(item,'shangjia',false)
								}
							})
							that.loading = false
						} else {

							that.$message.error(response.data.msg.info);
						}
					})
			},
			//搜索
			search: function() {
				this.form.page = 1
				this.loading = true
				this.getpro()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.productionDeliverysale1 {
		margin: 0;
		padding: 0;
		background: #EFEFEF;

		.center {
			width: 1366px;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;

			.right {
				flex-basis: 1166px;
				background: #FFF;

				.o_ul {
					background: #F9F9F9;
					display: flex;

					.o_li {
						padding: 0 20px;
						line-height: 45px;
						display: block;
						color: #727272;
						border-top: 3px #F9F9F9 solid;
						font-size: 14px;
						text-align: center;
					}

					.act {
						border-top: 3px #DD2727 solid;
						background: #FFFFFF;
					}
				}

				.row {
					display: flex;
					justify-content: space-between;
					padding: 30px;

					.el-form {
						display: flex;

						.el-form-item {
							margin-bottom: 0;
						}

						.el-button {
							margin-left: 20px;
						}
					}

					.only {
						padding: 7px;
					}

					.el-button {
						line-height: 14px;
						height: 36px;
						margin-top: 2px;
					}
				}

				.row2 {
					display: flex;
					padding-left: 30px;

					.el-button {
						margin-right: 30px
					}
				}

				.row3 {
					background: #EEF7FF;
					padding: 5px 0;
					color: #FFFFFF;
					line-height: 50px;
					display: flex;
					margin-top: 30px;
					margin-bottom: 15px;
					justify-content: space-between;

					.dlogo {
						margin-left: 0px;
						background: #FFFFFF;
						border-radius: 25px;
						margin-right: 10px;

						img {
							width: 30px;
							display: block;
							padding: 10px;
						}
					}

					.dtitle {
						font-size: 20px;
					}

					.dlogo2 {
						background: #FFFFFF;
						color: #EEF7FF;
						font-size: 20px;
						cursor: pointer;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 14px;
						width: 24px;
						;
						height: 24px;
						position: relative;
						top: 13px;
						left: 10px;
					}

					.dcon {
						font-size: 14px;
					}

					.dget {
						line-height: 26px;
						color: #EEF7FF;
						font-size: 14px;
						background: #FFFFFF;
						height: 26px;
						margin-top: 14px;
						padding: 0px 20px;
						border-radius: 15px;
					}

					.dmy {
						font-size: 14px;
						padding: 0 20px;
					}
				}

				.list:nth-child(2) {
					border-top: 0;
				}

				.list {
					.el-dropdown {
						color: #197CFF
					}

					&:hover {
						background: #EFEFEF
					}

					display: flex;
					color: #727272;
					border-top:1px #EAEAEA solid;
					font-size: 14px;
					padding: 15px 0;
					line-height: 90px;
					text-align: left;

					.th1 {
						flex-basis: 360px;
						background: #F9F9F9;
						line-height: 45px;
						padding-left: 30px;
					}

					.th2 {
						flex-basis: 100px;
						background: #F9F9F9;
						line-height: 45px;
					}

					.th3 {
						flex-basis: 150px;
						background: #F9F9F9;
						line-height: 45px;
					}

					.th4 {
						flex-basis: 140px;
						background: #F9F9F9;
						line-height: 45px;
					}

					.th5 {
						flex-basis: 150px;
						background: #F9F9F9;
						line-height: 45px;
					}

					.th6 {
						flex-basis: 116px;
						background: #F9F9F9;
						line-height: 45px;
					}

					.th8 {
						flex-basis: 120px;
						background: #F9F9F9;
						line-height: 45px;
					}

					.td8 {
						flex-basis: 120px;
						font-size: 14px;
					}

					.td1 {
						flex-basis: 90px;
						padding: 0 25px;
						cursor: pointer;

						img {
							width: 90px;
							display: block;
						}
					}

					.td2 {
						flex-basis: 250px;
						font-size: 14px;
						cursor: pointer;
						height: 90px;
						overflow: hidden;

						.title {
							height: 40px;
							line-height: 20px;
							font-size: 14px;
							color: #197CFF;
							cursor: pointer;
						}

						.yd {
							line-height: 20px;
							height: 30px;

							span:nth-child(1) {
								color: #FF0024;
								border: 1px #FF0024 solid;
							}

							span:nth-child(2) {
								color: #FBB03B;
								border: 1px #FBB03B solid;
							}

							span:nth-child(3) {
								color: #2e317c;
								border: 1px #2e317c solid;
							}

							span {
								border: 1px #ccc solid;
								margin-right: 10px;
								padding: 2px 8px;
								border-radius: 3px;
							}
						}

						.alt {
							line-height: 20px;
							color: #808080
						}
					}

					.td3 {
						flex-basis: 100px;
						font-size: 14px;
					}

					.td4 {
						flex-basis: 150px;
						font-size: 14px;
						height: 90px;
						overflow: hidden;

						.el-tooltip {
							width: 100%;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
					}

					.td5 {
						flex-basis: 140px;
						font-size: 14px;
					}

					.td6 {
						flex-basis: 150px;
						font-size: 14px;
					}

					.td7 {
						flex-basis: 116px;
						font-size: 14px;
						line-height: 30px;

						.el-button {
							margin-left: 0;
							margin-bottom: 5px;
						}

						.el-dropdown {
							cursor: pointer;
						}
					}
				}

				.el-pagination {
					text-align: right;
					margin: 20px 0
				}

			}

		}

		.basispro {
			margin-top: 20px;
		}
	}
</style>
